<!-- 支付信息列表 -->
<template>
  <div class="DealerInfoStyle">
    <div class="cardAdmin">
      <div class="formContainer">
        <div class="formSearch">
          <span style="padding: 0 10px; text-align: right; line-height: 40px;; font-size: 15px;">服务ID：</span>
          <el-input style="flex: 3;" v-model="form.service_id"></el-input>
        </div>
        <div class="formSearch">
          <span style="padding: 0 10px; text-align: right; line-height: 40px;; font-size: 15px;">用户ID
            ：</span>
          <el-input style="flex: 3;" v-model="form.user_id"></el-input>
        </div>
        <div class="formSearch">
          <span style="padding: 0 10px; text-align: right; line-height: 40px;; font-size: 15px;">姓
            ：</span>
          <el-input style="flex: 3;" v-model="form.first_name"></el-input>
        </div>
        <div class="formSearch">
          <span style="padding: 0 10px; text-align: right; line-height: 40px;; font-size: 15px;">名
            ：</span>
          <el-input style="flex: 3;" v-model="form.last_name"></el-input>
        </div>
        <div class="formSearch">
          <span style="padding: 0 10px; text-align: right; line-height: 40px;; font-size: 15px;">手机号
            ：</span>
          <el-input style="flex: 3;" v-model="form.phone_number"></el-input>
        </div>
        <div class="" style="height: 40px;;width: 100%;justify-content: right;margin-right: 6px;position: relative;">
          <el-button class="el-icon-search" style="position: absolute;right: 0;top: 3px;" type="primary" size="small"
            @click="get_PayInfo()">
            查询</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <el-table :data="crawlStocksTable" border style="width: 100%;min-height: 78%;max-height: 78%;overflow: auto;">
      <!-- ID 列 -->
      <el-table-column resizable prop="id" label="ID" width="60" align="center"></el-table-column>
      <!-- 状态 列 -->
      <el-table-column resizable prop="state" label="状态" width="auto" min-width="170px" align="center"></el-table-column>

      <!-- 用户 ID 列 -->
      <el-table-column resizable prop="user_id" label="用户ID" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 地址 列 -->
      <el-table-column resizable prop="address" label="地址" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 地址第二行 列 -->
      <el-table-column resizable prop="address_line2" label="地址行2" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 卡片名称 列 -->
      <el-table-column resizable prop="card_name" label="卡片名称" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 卡片号码 列 -->
      <el-table-column resizable prop="card_number" label="卡片号码" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 城市 列 -->
      <el-table-column resizable prop="city" label="城市" width="auto" min-width="170px" align="center"></el-table-column>

      <!-- 确认邮箱 列 -->
      <el-table-column resizable prop="confirm_email" label="确认邮箱" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 国家 列 -->
      <el-table-column resizable prop="country" label="国家" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- CVV 列 -->
      <el-table-column resizable prop="cvv" label="CVV" width="auto" min-width="170px" align="center"></el-table-column>

      <!-- 邮箱地址 列 -->
      <el-table-column resizable prop="email_address" label="邮箱地址" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 到期月份 列 -->
      <el-table-column resizable prop="expiration_month" label="到期月份" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 到期年份 列 -->
      <el-table-column resizable prop="expiration_year" label="到期年份" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 电话号码 列 -->
      <el-table-column resizable prop="phone_number" label="电话号码" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 邮政编码 列 -->
      <el-table-column resizable prop="postal_code" label="邮政编码" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 服务 ID 列 -->
      <el-table-column resizable prop="service_id" label="服务ID" width="auto" min-width="170px"
        align="center"></el-table-column>

      <!-- 添加时间 列 -->
      <el-table-column resizable prop="add_time" label="添加时间" width="auto" min-width="170px"
        align="center"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="text-align: right; margin-top: 5px;">
      <el-pagination background layout="prev, pager, next,total" :total="total" :page-size="pagesize"
        @current-change="current_change"></el-pagination>
    </div>
  </div>
</template>

<script>
import { PayInfo } from "@/utils/api";
export default {
  name: 'crawlStocksInfo',
  data() {
    return {
      form: {
        service_id: '',
        user_id: '',
        first_name: '',
        last_name: '',
        phone_number: '',
      },
      crawlStocksTable: [],
      total: 100, //总条数
      pagesize: 10, //指定展示多少条
      currentPage: 1, //当前页码
      titles: '',
      roleHeadgear: null,
      is_public: 0
    };
  },
  mounted() {
    this.get_PayInfo()
  },

  methods: {
    // 查询支付列表
    async get_PayInfo() {
      let data = {};

      if (this.form.service_id !== '') {
        data.service_id = Number(this.form.service_id)
      }
      if (this.form.first_name !== '') {
        data.first_name = Number(this.form.first_name)
      }
      if (this.form.user_id !== '') {
        data.user_id = Number(this.form.user_id)
      }
      if (this.form.last_name !== '') {
        data.last_name = this.form.last_name
      }
      if (this.form.phone_number !== '') {
        data.phone_number = this.form.phone_number
      }
      const res = await PayInfo(data, this.currentPage).catch((err) => {
        return console.error(err);
      });
      if (res && res.status == "200") {
        this.crawlStocksTable = res.data.data.data
        this.total = res.data.data.total
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 分页
    current_change(currentPage) {
      this.currentPage = currentPage;
      this.get_PayInfo();
    },
  },
};
</script>
<style>
.cell {
  font-size: 12px;
  white-space: nowrap !important;
}

.el-dialog__body {
  padding: 0 10px !important;
}

.demo-table-expand {
  font-size: 0;
  margin-left: 10px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<style lang="less" scoped>
.DealerInfoStyle {
  width: 100%;
  padding: 0 10px;
  // background-color: aquamarine;
  height: calc(100vh - 100px);
  // border: 1px #000 solid;

  .cardAdmin {
    position: relative;
    // height: 18%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;

    border: #ebeef5 solid 1px;
    padding: 0 5px;
    margin-bottom: 2px;


    .formContainer {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      align-self: baseline;
    }

    .formSearch {
      width: 25%;
      min-width: 25%;
      margin: 10px 0;
      height: 40px;
      display: flex;
      justify-content: center;
    }
  }

  .pop-up-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    align-self: baseline;
    margin: 10px 0;
    justify-content: center;
    padding-right: 15px;

    .form-options {
      width: 100%;
      min-width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      margin: 10px 0;
    }
  }
}
</style>
